<template>
  <div class="captcha-box input-box">
    <input
        class="captcha-input"
        v-model="verificationCode"
        type="text"
        required
    />
    <label>验证码</label>
    <button
        type="button"
        class="captcha-btn"
        @click="sendVerificationCode"
        :disabled="isCaptchaBtnLocked"
    >
      {{ isCaptchaBtnLocked ? `${captchaCountdown}s后重新获取` : "获取验证码" }}
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import request from "@/utils/request.ts"
export default defineComponent({
  name: "Captcha",
  props: {
    type: {
      type: String,
      required: true,
    },
    mail: {
      type: String,
      required: true,
    },
    sendVerificationCodeCallback: {
      type: Function,
      required: true,
    },
    modelValue: {
      type: String,
      required: true,
    },
    accountNo: {
      type: String,
      required: true,
    }
  },
  setup(props, { emit }) {
    const verificationCode = ref(props.modelValue); // 输入的验证码
    const isCaptchaBtnLocked = ref(false); // 按钮是否被锁定
    const captchaCountdown = ref(0); // 倒计时

    // 监听验证码输入变化，确保双向绑定
    watch(() => verificationCode.value, (newVal) => {
      emit('update:modelValue', newVal); // 更新父组件中的验证码值
    });

    // 发送验证码的函数
    const sendVerificationCode = () => {
      // if (isCaptchaBtnLocked.value) return;
      //
      // console.log(`发送验证码到邮箱: ${props.email}`);

      //

      console.log(props)
      request.post("/user/mailCode",props).then(res=>{
        if(res.data.code === '200'){
          isCaptchaBtnLocked.value = true;
          captchaCountdown.value = 60;
          // 调用父组件传递的发送验证码的回调函数
          props.sendVerificationCodeCallback(props.mail);

          const timer = setInterval(() => {
            captchaCountdown.value -= 1;
            if (captchaCountdown.value <= 0) {
              isCaptchaBtnLocked.value = false;
              clearInterval(timer);
            }
          }, 1000);
          alert("发送验证码成功！")
        }else {
          alert("账号或邮箱已被注册！")
        }
      })
    };

    return {
      verificationCode,
      isCaptchaBtnLocked,
      captchaCountdown,
      sendVerificationCode,
    };
  },
});
</script>

<style scoped>
/* 输入框通用样式 */
.input-box {
  position: relative;
  width: 250px;
  margin-bottom: 25px;
  border-bottom: 2px solid #fff;
}

.input-box input {
  width: 100%; /* 输入框宽度统一 */
  height: 40px; /* 输入框高度统一 */
  background: transparent;
  outline: none;
  border: none;
  font-size: 22px;
  color: #fff;
  padding: 0 10px;
}

.input-box label {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: 0.3s;
}

/* 激活状态或输入有值时文字上浮 */
.input-box input:focus ~ label,
.input-box input:valid ~ label {
  top: -10px;
  font-size: 14px;
  color: #ccc;
}

/* 验证码区域样式 */
.captcha-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.captcha-input {
  flex: 2;
  margin-right: 10px;
}

.captcha-btn {
  flex: 3;
  height: 40px;
  background: linear-gradient(90deg, #FF4D4D, #CC0000);
  border: none;
  border-radius: 10px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
}

.captcha-btn:hover {
  background: linear-gradient(90deg, #FF6666, #FF0000);
}

</style>
